@import url('./cursor.less');
.vdr-container {
  position: absolute;
  box-sizing: border-box;
  display: none;
  opacity: 0;
  &.active {
    display: block;
    opacity: 1;
  }
}

.t {
  top: 0;
}
.m {
  top: 50%;
  width: 2px;
  border-radius: 2px;
}
.b {
  bottom: 0;
}

.vdr-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: red;
  border-radius: 50%;
  z-index: 2;
  &-tl {
    .t();
    left: 0px;
  }
  &-tm{
    .t();
    left: 50%;
    height: 2px;
    border-radius: 2px;
  }
  &-tr{
    .t();
    right: 0px;
  }
  &-ml {
    .m();
    left: 0px;
  }
  &-mr {
    .m();
    right: 0;
  }
  &-bl {
    .b();
    left: 0px;
  }
  &-bm {
    .b();
    left: 50%;
    height: 2px;
    border-radius: 2px;
  }
  &-br {
    .b();
    right: 0px;
  }
}

.vdr-line {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 1px;
  background: #36e0be;
  transform-origin: 0px 50%;
}

.vdr-rotate {
  cursor: alias !important;
  position: absolute;
  width: 1px;
  height: 14px;
  top: auto;
  left: 50%;
  bottom: 100%;
  will-change: transform;
  transform: translate(-50%, 0) rotate(0deg);
  .vdr-rotate-control {
    height: 0;
    width: 0;
    left: 0;
    top: 0;
    transform: translate(0.5px);
    &::after {
      content: '';
      display: block;
      width: 14px;
      height: 14px;
      border: 1px solid #409EFF;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      transform: translate(-50%, -50%)
    }
  }
}
